<template>
  <div class="head">
    <el-row :gutter="20">
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="14">
        <el-input placeholder="" v-model="searchName" class="input-with-select">
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="search"
          ></el-button> </el-input
      ></el-col>
      <el-col :span="3">
        <el-button icon="el-icon-plus" @click="add"></el-button>
      </el-col>
      <el-col :span="3">
        <el-dropdown class="avatar-container right-menu-item hover-effect">
          <div class="avatar-wrapper">
            <el-row>
              <img
                src="
                    https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png
                  "
                class="user-avatar"
              />
            </el-row>
          </div>
          <el-dropdown-menu slot="dropdown">
            <router-link to="/userCenter">
              <el-dropdown-item> 个人中心 </el-dropdown-item>
            </router-link>
            <span style="display: block" @click="logout">
              <el-dropdown-item divided> 退出登录 </el-dropdown-item>
            </span>
            <!-- <span>
            <el-dropdown-item> <a href="http://146.242.4.66/sso/logout?service=http://147.1.29.19:8020/bdops&flag=c38259014017b0ea44a99c0e73c7aba246f1608685fb2590115b607dd0bca722" referrerpolicy="no-referrer-when-downgrade">退出SSO</a> </el-dropdown-item>
          </span> -->
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import api from "@api/index";
export default {
  data() {
    return {
      searchName: "",
    };
  },
  methods: {
    logout() {
      console.log("logout");
    },
    search() {
      console.log("search");
      var data = {
        title: this.searchName,
      };
      api.search(data).then(
        (res) => {
          console.log(res);
        },
        (err) => {
          console.log(err);
        }
      );
    },
    add() {
      this.$emit("isAdd");
    },
  },
};
</script>

<style scoped>
.head {
  /* margin: 20px 0; */
  padding: 20px;
}
.bg-purple {
  background: #d3dce6;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.user-avatar {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.input-with-select {
  margin: 0 25%;
  width: 50%;
}
</style>